import { Button, Form, Modal, Table, Input } from "antd";
import { useState } from "react";
import request from "../../framework/common/utils/request";
import qs from "qs";
import { useForm } from "../../framework/common/context/metadata-context";
import useTable from "../../framework/common/lifecycle/useTable";
import { orderMapper } from "../../framework/common/utils/mappers";
const opt = {
  uploadText: "上传",
  syncText: "业务系统同步",
  downloadText: "下载",
  deleteText: "删除",
  previewText: "预览",
  checkoutText: "签出&编辑",
  checkinText: "签入",
};

export default function () {
  const [isVisible, setIsVisible] = useState(false);
  function showModal() {
    setIsVisible(true);
  }
  return (
    <>
      <Button className="float-right" onClick={showModal} type="link">
        附件记录
      </Button>
      {isVisible && <ModalContent isVisible={isVisible} setIsVisible={setIsVisible}></ModalContent>}
    </>
  );
}

//Form.create HOC, 2016-2017年流行

//重用方式
//2016之前mixin 混入  -->2016-2017年 HOC -->  2016-2017年 Render Props   --> 2018年之后 Hooks/Composition API/Composables
const ModalContent = function ({ isVisible, setIsVisible }) {
  function handleOk() {
    setIsVisible(false);
  }
  const handleCancel = () => {
    setIsVisible(false);
  };
  const metadataManager = useForm();
  const [form] = Form.useForm();
  // const { getFieldDecorator } = form;
  const { tableProps, search } = useTable(
    (
      {
        current = 1, // 设定初始在第1页
        pageSize, // 初始每页默认10条数据
        sorter,
      },
      formData
    ) => {
      return request({
        url: "/flowinstance/process/ajax-get-attachment-record",
        method: "post",
        isForm: true,
        data: qs.stringify({
          page: current,
          pagesize: pageSize,
          proc_id: metadataManager.data.ProcessInfo.ProcessGuid,
          keyword: formData.keyword || null,
          order_by: `op_time ${orderMapper[sorter?.order || "descend"]}`,
        }),
      }).then(function (response) {
        let list = response?.data?.list || [];
        // list = list.concat(list).concat(list).concat(list).concat(list).concat(list).concat(list);
        list.forEach((item, index) => {
          item.index = index + 1 + (current - 1) * 10;
          item.op_type = opt[item.op_type + "Text"];
        });
        return {
          total: response.data.total,
          list: list,
        };
      });
    },
    {
      form,
    }
  );
  const { submit } = search;
  const columns = [
    {
      title: "序号",
      dataIndex: "index",
      width: 50,
    },
    {
      title: "附件名称",
      dataIndex: "doc_name",
      width: 200,
      ellipsis: true,
    },
    {
      title: "操作",
      dataIndex: "op_type",
      width: 100,
      ellipsis: true,
    },
    {
      title: "操作人",
      dataIndex: "op_username",
      width: 100,
      ellipsis: true,
    },
    {
      title: "操作时间",
      dataIndex: "op_time",
      width: 150,
      sorter: true,
      ellipsis: true,
    },
    {
      title: "操作端",
      dataIndex: "op_client",
      ellipsis: true,
    },
  ];

  return (
    <Modal centered={true} title="附件记录" width={760} visible={isVisible} onOk={handleOk} onCancel={handleCancel}>
      <div className="mb-3px text-gray-999">流程名称：{metadataManager.data.ProcessInfo?.ProcessDisplayName}</div>
      <Form form={form}>
        <Form.Item name="keyword" noStyle>
          <Input.Search autoComplete="off" placeholder="请输入附件名称、操作人" onSearch={submit} style={{ width: 290, marginBottom: "10px" }} />
        </Form.Item>
      </Form>
      <Table 
        className="table-madol"
        columns={columns} 
        scroll={{ y: 360 }} 
        rowKey="index"
        {...tableProps}
      />
    </Modal>
  );
};
